.button {
  --buttonWidthXxs: 2px;
  --buttonWidthXs: 4px;
  --buttonWidthS: 6px;
  --buttonWidthM: 8px;
  --buttonWidthL: 12px;
  --buttonWidthXl: 16px;
  --buttonWidthXxl: 20px;

  --buttonHeightXxs: 2px;
  --buttonHeightXs: 4px;
  --buttonHeightS: 6px;
  --buttonHeightM: 8px;
  --buttonHeightL: 12px;
  --buttonHeightXl: 16px;
  --buttonHeightXxl: 20px;

  transition: all .1s ease;
  user-select: none;


  &_primary {
    padding: var(--buttonHeightS) var(--buttonWidthM);
    border: 1px solid var(--text);
    border-radius: 5px;
    color: var(--text);

    &:active {
      border-color: var(--bg-toolbar-active);
    }
    &:hover {
      cursor: pointer;
    }
  }
  &_secondary {
    padding: var(--buttonHeightS) var(--buttonWidthM);
    border: 1px solid var(--bg-toolbar-active);
    background-color:  var(--bg-toolbar-active);
    border-radius: 5px;
    color: var(--fg-toolbar-active);

    &:active {
      border-color: var(--bg-toolbar-active);
    }
    &:hover {
      cursor: pointer;
    }
  }

  &_thin {
    padding: var(buttonHeightS) var(--buttonWidthM);
  }
  &_thick {
    padding: var(buttonHeightL) var(--buttonWidthXxl);
  }

  &_rounded {
    border-radius: 5px;
  }

  &_clear {
    background: transparent;
    border: 0px;
    border-radius: 0px;
    padding: 0px;
  }
  &_clear:hover {
    border: 0px;
    box-shadow: none;
  }

  &_title {
    padding: 12px;
    color: var(--fg-header);
    opacity: .4;
    background-color: var(--bg-header-control);

    &:hover {
      opacity: 1;
      // background-color: var(--bg-header-control-hover);
      // color: var(--bg-header-hover);
      cursor: default;
    }
  }
  &_control {
    padding: 12px 18px;
    background-color: var(--bg-header-control);
    color: var(--fg-header-control);

    &:hover {
      background-color: var(--bg-header-control-hover);
      color: var(--bg-header-control-hover);
      cursor: default;
    }
  }
  &_close {
    color: var(--fg-header-control);
    &:hover {
      background: var(--bg-window-close);
      cursor: default;
    }
  }

  &_disabled {
    color: var(--text-disabled);
    border-color: var(--text-disabled);
    cursor: default;

    &:hover {
      cursor: default;
    }
  }
}
